import React from 'react'
import { ClipPath, Defs, LinearGradient, Rect, Stop } from 'react-native-svg'
import { AreaChart, Path } from 'react-native-svg-charts'

class PartialAreaChartExample extends React.PureComponent {
  render() {
    const data = [50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80]

    const indexToClipFrom = 10

    const Gradient = () => (
      <Defs key={'defs'}>
        <LinearGradient id={'gradient'} x1={'0%'} y={'0%'} x2={'0%'} y2={'100%'}>
          <Stop offset={'0%'} stopColor={'rgb(134, 65, 244)'} stopOpacity={0.8} />
          <Stop offset={'100%'} stopColor={'rgb(134, 65, 244)'} stopOpacity={0.2} />
        </LinearGradient>
      </Defs>
    )

    const Clips = ({ x, width, height }) => {
      return (
        <Defs key={'clips'}>
          <ClipPath id={'clip-path-1'} key={'0'}>
            <Rect x={0} y={'0'} width={250} height={100} />
          </ClipPath>
          <ClipPath id="clip-path-2" key={'1'}>
            <Rect x={x(indexToClipFrom)} y={'100'} width={width - x(indexToClipFrom)} height={height} />
          </ClipPath>
        </Defs>
      )
    }

    const Line = ({ line }) => (
      <Path
        key={'line'}
        d={line}
        stroke={'green'}
        fillOpacity={0}
        clipPath={'url(#clip-path-1)'}
      />
    )

    const DashedLine = ({ line }) => (
      <Path
        key={'dashed-line'}
        stroke={'green'}
        d={line}
        fillOpacity={0}
        clipPath={'url(#clip-path-2)'}
        strokeDasharray={[4, 4]}
      />
    )

    return (
      <AreaChart
        style={{ height: 200 }}
        data={data}
        contentInset={{ top: 30, bottom: 30 }}
        svg={{
          fill: 'url(#gradient)',
          clipPath: 'url(#clip-path-1)',
        }}
      >
        <Gradient />
        <Clips />
        <Line />
        <DashedLine />
      </AreaChart>
    )
  }
}

export default PartialAreaChartExample